<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">


<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table-locale-all.min.js"></script>


{{ .StocksModuleNav }}

<div id="toolbar">
    <form class="row gy-2 gx-3 align-items-center">
        <div class="col-auto">
            <select name="type" id="type" class="form-select form-select-sm">
                <option selected value="1">基金持仓</option>
                <option value="2">QFII持仓</option>
                <option value="3">社保持仓</option>
                <option value="4">券商持仓</option>
                <option value="5">保险持仓</option>
                <option value="6">信托持仓</option>
            </select>
        </div>
        <div class="col-auto">
            <select name="zjc" id="zjc" class="form-select form-select-sm">
                <option selected value="0">全部</option>
                <option value="1">增仓</option>
                <option value="2">减仓</option>
            </select>
        </div>
        <div class="col-auto">
            <div class="input-group input-group-sm">
                <div class="input-group-text">代码</div>
                <input type="text" class="form-control" name="code" style="width: 130px;" placeholder="6位数股票代码">
            </div>
        </div>
        <div class="col-auto">
            <select name="ReportDate" id="ReportDate" class="form-select form-select-sm">
                {{ range $index, $q := .Quarter }}
                {{ if eq $index 0 }}
                <option selected value="{{ $q }}">{{$q}}</option>
                {{ else }}
                <option value="{{ $q }}">{{$q}}</option>
                {{ end }}
                {{ end }}
            </select>
        </div>
        <!-- <div class="col-auto">
            <div class="input-group input-group-sm">
                <div class="input-group-text">关键字</div>
                <input type="text" class="form-control" name="search" placeholder="关键字">
            </div>
        </div> -->
        <div class="col-auto">
            <button type="button" id="search" class="btn btn-primary btn-sm">查询</button>
            <button type="button" id="exportexcel" class="btn btn-success btn-sm">导出Excel</button>
        </div>
    </form>
</div>

<table id="table" data-toggle="table" data-locale="zh-CN" data-pagination="true" data-side-pagination="server"
    data-page-size="25" data-page-list="[10, 25, 50, 100, 200, All]" data-url="/funds/stock/list"
    data-query-params="queryParams" data-method="post" data-cache="true" data-toolbar="#toolbar"
    data-sort-name="HOLD_VALUE" data-sort-order="desc">
    <thead>
        <tr>
            <th data-field="SECURITY_CODE" data-width="100" data-formatter="xueqiuFormatter">股票代码</th>
            <th data-field="SECURITY_NAME_ABBR" data-width="100" data-formatter="fxFormatter">股票名称</th>
            <th data-field="REPORT_DATE" data-width="100" data-formatter="dtFormatter">财报季度</th>
            <th data-field="ORG_TYPE_NAME" data-width="100">机构类型</th>
            <th data-field="HOULD_NUM" data-width="100" data-sortable="true" data-sort-name="HOULD_NUM">机构家数</th>
            <th data-field="HOLDCHA" data-width="100" data-formatter="f6Formatter">财季增减</th>
            <th data-field="HOLDCHA_NUM" data-width="100" data-sortable="true" data-sort-name="HOLDCHA_NUM"
                data-formatter="wanFormatter">本季变动(万股)</th>
            <th data-field="HOLDCHA_RATIO" data-width="100" data-sortable="true" data-sort-name="HOLDCHA_RATIO"
                data-formatter="fixFormatter">变动比例</th>
            <th data-field="TOTAL_SHARES" data-width="100" data-sortable="true" data-sort-name="TOTAL_SHARES"
                data-formatter="wanFormatter">持股数量(万股)</th>
            <th data-field="HOLD_VALUE" data-width="100" data-sortable="true" data-sort-name="HOLD_VALUE"
                data-formatter="wanFormatter">持股金额(万元)</th>
        </tr>
    </thead>
</table>




<script>
    var g_export_flag = 0;
    function queryParams(params) {
        params.pageno = params.offset / params.limit + 1;
        params.pagesize = params.limit;

        params.export = g_export_flag;

        $('#toolbar').find('input[name]').each(function () {
            params[$(this).attr('name')] = $(this).val()
        })
        $('#toolbar').find('select[name]').each(function () {
            params[$(this).attr('name')] = $(this).val()
        })
        return params;
    }
    function xueqiuFormatter(value, row) {
        var stockCode = value;
        var kind = 'SH';
        if (stockCode.substring(0, 1) == '0' || stockCode.substring(0, 1) == '3') {
            kind = 'SZ';
        }
        return '<a target="_blank" href="https://xueqiu.com/S/' + kind + stockCode + '">' + value + '</a>';
    }
    function fxFormatter(value, row) {
        return '<a target="_self" href="/stocks/weigh/' + row.SECURITY_CODE + '">' + value + '</a>';
    }
    function dtFormatter(value, row) {
        if (value.length >= '2021-09-16 14:00:00'.length) {
            return value.substring(0, 10);
        }
        return value;
    }
    function wanFormatter(value, row) {
        return (value / 10000).toFixed(2);
    }
    function fixFormatter(value, row) {
        return (value * 1).toFixed(2) + '%';
    }

    function f6Formatter(value, row) {
        var color = value == '增仓' ? 'red' : 'green';
        color = value == '新进' ? 'blue' : color;
        return '<span style="color:' + color + '">' + value + '</span>';
    }
    $("#table").bootstrapTable({
        onLoadSuccess: function () {
            if (g_export_flag == 1) {
                g_export_flag = 0;
                window.open('/static/logs/stockbook1.xlsx');
            }
        }
    })


    $("#search").on("click", function () {
        $("#table").bootstrapTable('refresh');
    })
    $("#exportexcel").on("click", function () {
        g_export_flag = 1;
        $("#table").bootstrapTable('refresh');
    });

    $('#toolbar').find('input[name]').on("keyup", function (e) {
        if (e.keyCode == 13) {
            $("#table").bootstrapTable('refresh');
        }
    });
    $('#toolbar').find('select[name]').on("change", function (e) {
        $("#table").bootstrapTable('refresh');
    });

    $(function () {

    });
</script>